<template>
  <VxeGrid v-bind="props" :loading="loading"></VxeGrid>
</template>

<script lang="ts" setup>
import {
  VxeUI,
  VxeButton,
  VxeButtonGroup,
  VxeDrawer,
  VxeForm,
  VxeFormGroup,
  VxeFormItem,
  VxeIcon,
  VxeLoading,
  VxeModal,
  VxePager,
  VxePrint,
  VxeTooltip,
  VxeUpload,
} from 'vxe-pc-ui'

import { VxeColumn, VxeColgroup, VxeGrid, VxeToolbar, type VxeGridProps } from 'vxe-table'

// 导入主题变量，也可以重写主题变量
import 'vxe-pc-ui/lib/style.css'
import 'vxe-table/lib/style.css'

// 导入默认的语言
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'

VxeUI.setI18n('zh-CN', zhCN)
VxeUI.setLanguage('zh-CN')

// 注册组件
// 如果页面中已经被显性导入了，则可以不用调用注册
// 如果是配置式的，没有在页面中显性导入，则需要逐个注册
VxeUI.component(VxeButton)
VxeUI.component(VxeButtonGroup)
VxeUI.component(VxeDrawer)
VxeUI.component(VxeForm)
VxeUI.component(VxeFormGroup)
VxeUI.component(VxeFormItem)
VxeUI.component(VxeIcon)
VxeUI.component(VxeLoading)
VxeUI.component(VxeModal)
VxeUI.component(VxePager)
VxeUI.component(VxePrint)
VxeUI.component(VxeTooltip)
VxeUI.component(VxeUpload)

VxeUI.component(VxeColumn)
VxeUI.component(VxeColgroup)
VxeUI.component(VxeGrid)
VxeUI.component(VxeToolbar)

// // 单元格样式设置
// interface IColumnStyles {
//   /**
//    * 无特殊含义(未使用)
//    * 颜色名称
//    * 例如:(高危药品, 毒麻药品, 危害药物)
//    */
//   name: string
//   /**
//    * 样式显示指定字段
//    * 指示样式在那个字段上可以生效
//    * specifyField
//    * 例如: (IsHighRisk, DrugName)
//    */
//   specifyField: string
//   /**
//    * 样式判断指定字段
//    * 指示需要判断那个字段的值
//    * judgeField
//    * 例如: (IsHighRisk, DrugName)
//    */
//   judgeField: string
//   /**
//    * 样式判断值
//    * 判断 (样式判断指定字段) 的值是否为其中的内容
//    * 例如: ([true, "肾上腺素"])
//    */
//   value: string[]
//   /**
//    * 单元格字段样式
//    */
//   style: VxeComponentStyleType
// }

const props = withDefaults(defineProps<VxeGridProps>(), {
  border: true,
  round: true, // 圆角
  stripe: true, // 斑马线
  showFooter: true,
  size: 'mini',
  height: 600,
  showOverflow: true, // 溢出不展示
  showHeaderOverflow: true,
  showFooterOverflow: true,
  editConfig: () => ({
    trigger: 'click', // 行编辑模式
    mode: 'row',
  }),
  columnConfig: () => ({
    resizable: true, // 列宽调整
    drag: true, // 列拖拽
  }),
  resizableConfig: () => ({
    isDblclickAutoWidth: true, // 是否双击自动调整列宽
  }),
  // cellStyle: function ({ row, column }) {
  //   // 列样式设置
  //   const columnStyles: Array<IColumnStyles> = [
  //     {
  //       specifyField: 'drug_name',
  //       judgeField: 'drug_name',
  //       name: '抗生素',
  //       value: ['55555修改测试数据'],
  //       style: {
  //         backgroundColor: '#ff0000 ',
  //         color: 'white',
  //         fontStyle: 'italic',
  //         fontSize: '14px',
  //         fontWeight: 'bolder',
  //       },
  //     },
  //     {
  //       specifyField: 'drug_name',
  //       judgeField: 'drug_name',
  //       name: '人工贴签',
  //       value: ['■◎注射用硫酸长春新碱'],
  //       style: { backgroundColor: '#00ffff', color: '#ff0000', fontWeight: '900' },
  //     },
  //   ]
  //   // console.log(row, column);

  //   // 循环样式判断是否需要更改列样式
  //   for (const columnStyle of columnStyles) {
  //     if (
  //       columnStyle.specifyField === column.field &&
  //       columnStyle.value.some(
  //         (m) => m === (row as unknown as Record<string, string>)[columnStyle.judgeField],
  //       )
  //     ) {
  //       return columnStyle.style
  //     }
  //   }
  // },
  columns: () => [],
  data: () => [],
})
</script>

<style scoped></style>
